<template>
	<view class="">
		<view class="navbar">
			<view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
				<text>综合</text>
				<view class="p-box">
					<text :class="{active: priceOrder === 1 && filterIndex === 0}" class="icon iconfont">&#xe75d;</text>
					<text :class="{active: priceOrder === 2 && filterIndex === 0}" class="icon iconfont">&#xe7ff;</text>
				</view>
			</view>
			<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
				销量
			</view>
			<view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2)">
				价格
			</view>
			<view class="nav-item" :class="{current: filterIndex === 3}" @click="tabClick(3)">
				好评率
			</view>
		</view>
		<view class="goods-list">
			<view v-for="(item, index) in searchList" :key="index" class="goods-item" @click="navToDetailPage(item)">
				<view class="image-wrapper">
					<image :src="item.url" mode="aspectFill"></image>
				</view>
				<view class="conten-bottom">
					<text class="title clamp">{{item.productName}}</text>
					<view class="clamp-text">
						<text class="clamp-text1">{{item.clampText1}}</text>
						<text class="clamp-text2">{{item.clampText2}}</text>
					</view>
					<view class="price-box">
						<text class="price">{{item.unitPrice}}</text>
						<text class="price-unit"><text class="unit">￥</text>{{item.soldUnit}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			searchList: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data() {
			return {
				filterIndex: 0,
				priceOrder: 0, //1 价格从低到高 2价格从高到低
			}
		},
		onLoad(){
			this.searchKey = options.searchKey; //主页搜索
			this.searchProduct();
		},
		methods: {
			// 跳转商品详情
			navToDetailPage(item) {
				uni.navigateTo({
					url: '/pages/goods/detail/detail'
				})
			},
			tabClick(item) {
				this.$emit("tabClick(index)")
			},
			//搜索商品
			searchProduct() {
				var keyArray = [];
				keyArray.push('ON_SALE');
				if (this.cateId) {
					keyArray.push('PRODUCT_CATE');
				}
				if (this.searchKey) {
					keyArray.push('PRODUCT_NAME');
				}
				if (this.searchBrand) {
					keyArray.push('BRAND');
				}
				let searchData = {
					'keyArray': keyArray,
					'onSale': true,
					'productCateUuid': this.cateId,
					'productName': this.searchKey,
					'productBrandUuid': this.searchBrand,
					'startIndex': (this.pageNo - 1) * this.pageSize,
					'pageSize': this.pageSize,
					'sortBy': this.sortBy,
					'sort': this.sort
				};
				//加载中
				this.loadingType = 'loading';
				
			},
			//重置商品及分页
			resetPage() {
				this.pageNo = 1;
				this.ListContent = [];
			},
			//筛选点击
			tabClick(index) {
				if (this.filterIndex === index && index !== 0) {
					return;
				}
				this.filterIndex = index;
				if (index === 0) {
					this.priceOrder = this.priceOrder === 1 ? 0 : 1;
				} else {
					this.priceOrder = 0;
				}
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				//重置商品及查询参数
				this.resetPage();
				//获取排序值及升降序
				if (this.filterIndex === 0) {
					this.sortBy = 'updateDate';
					this.sort = 'desc';
				} else if (this.filterIndex === 0) {
					this.sortBy = 'soldUnit';
					this.sort = 'desc';
				} else if (this.filterIndex === 0) {
					this.sortBy = 'unitPrice';
					if (this.priceOrder == 1)
						this.sort = 'asc';
					else if (this.priceOrder == 2)
						this.sort = 'desc';
				}
				this.searchProduct();

			},
		}
	}
</script>

<style lang="scss">
	.navbar {
		position: -webkit-sticky;
		position: sticky;
		// top: var(--window-top);
		display: flex;
		width: 100%;
		height: 80rpx;
		background: #fff;
		// box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, .06);
		z-index: 10;

		.nav-item {
			top: 0;
			z-index: 1;
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30rpx;
			color: #333;
			position: relative;

			&.current {
				color: red;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120rpx;
					height: 0;

				}
			}

			.slot-content {
				width: 100%;
				height: 60%;

			}
		}

		.p-box {
			display: flex;
			flex-direction: column;

			.iconfont {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 15rpx;
				height: 6rpx;
				margin-left: 4rpx;
				font-size: 25rpx;
				color: #888;

				&.active {
					color: red;
				}
			}


		}

		.cate-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80rpx;
			position: relative;
			font-size: 44rpx;

			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36rpx;
			}
		}
	}

	/* 商品列表 */
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 20rpx;
		margin-top: 16rpx;

		.goods-item {
			background: #fff;
			display: flex;
			flex-direction: column;
			width: 49%;
			margin-bottom: 16rpx;

			&:nth-child(2n+1) {
				margin-right: 14rpx;
			}
		}

		.image-wrapper {
			width: 100%;
			height: 330rpx;
			border-radius: 3px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.conten-bottom {
			padding: 24rpx 15rpx 30rpx 15rpx;

			.title {
				font-size: 30rpx;
				color: #333;
			}

			.clamp-text {
				display: flex;
				margin-top: 16rpx;

				text {
					padding: 6rpx 11rpx;
					font-size: 18rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 1;
				}

				.clamp-text1 {
					margin-right: 10rpx;
					border: 1rpx solid rgba(29, 184, 240, 1);
					border-radius: 7rpx;
					color: rgba(29, 198, 240, 1);
				}

				.clamp-text2 {
					border: 1rpx solid rgba(253, 116, 11, 1);
					border-radius: 7rpx;
					color: rgba(250, 143, 20, 1);
				}
			}

			.price-box {
				margin-top: 34rpx;
				display: flex;
				align-items: center;
				font-family: PingFang SC;
				font-weight: bold;
			}

			.price {
				font-size: 32rpx;
				color: #F01E32;

				&:before {
					content: '￥';
					font-size: 24rpx;
				}
			}

			.price-unit {
				margin-left: 10rpx;
				font-size: 24rpx;
				text-decoration: line-through;
				color: #A4A4A4;

				.unit {
					font-size: 20rpx;
				}
			}
		}
	}
</style>
